<template>
  <div>
    <div id="indexPage" class="firstBox">
      <!-- header -->
      <div class="logoBox">
        <div class="logo">
          <img class="margin-right-sm" src="@/assets/images/login-gq.png" alt>
          <span class="logoTitle">生态环境执法指挥调度决策辅助平台</span>
        </div>
        <div class="login" @click="loginIndex">
          <i class="iconfont icon-tuichu"></i>
          <span style="margin-top:-4px">登录</span>
        </div>
      </div>
      <div class="timeBox padding-xl">
        <p class="text-24 text-white" v-html="formateTimeStamp(date)"></p>
      </div>
    </div>
    <div class="firstCon">
      <div
        class="flex-sub"
        v-for="(item, index) in list"
        :key="index"
        :style="{background: item.bgcolor}"
        @click="listClick(index)"
      >
        <div class="main">
          <i :class="['iconfont', item.icon]" :style="{color:item.color}"></i>
          <p class="text-title" :style="{color:item.textColor}" :title="item.text">{{item.text}}</p>
        </div>
      </div>
    </div>
    <el-dialog title="登录" v-model="dialogVisible" width="30%">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">欢迎登录{{list[osindex].text}}系统</h3>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <template #prepend>
              <i class="iconfont icon-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <template #prepend>
              <i class="iconfont icon-mima"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
        <div class="loginbtn" @click="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import api from "@/api";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的账号"
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入您的密码"
          }
        ]
      },
      osindex: 0,
      loading: false,
      dialogVisible: false,
      reqUrl: "http://" + window.location.host,
      date: new Date().getTime(),
      list: [
        {
          icon: "icon-hangzhengzhifa-16px",
          text: "综合执法",
          bgcolor: "#FEF2F2",
          color: "#FF3D4F",
          textColor: "#DD6968"
        },
        {
          icon: "icon-shuben-book3",
          text: "学法练兵",
          bgcolor: "#EFFAFE",
          color: "#37C9F5",
          textColor: "#3188D1"
        },
        {
          icon: "icon-chengxinhezuowoshou",
          text: "企业帮扶",
          bgcolor: "#FEF2F2",
          color: "#FF3D4F",
          textColor: "#DD6968"
        },
        {
          icon: "icon-xinxigongxiangzhongxin",
          text: "指挥中心",
          bgcolor: "#FFF9F1",
          color: "#FAAC2B",
          textColor: "#92561D"
        },
        {
          icon: "icon-bangong",
          text: "日常办公",
          bgcolor: "#FFF9F1",
          color: "#FAAC2B",
          textColor: "#92561D"
        },
        {
          icon: "icon-analyze",
          text: "数据中心",
          bgcolor: "#EFFAFE",
          color: "#37C9F5",
          textColor: "#3188D1"
        },

        {
          icon: "icon-kongjiantongjifenxi",
          text: "统计分析",
          bgcolor: "#FFF9F1",
          color: "#FAAC2B",
          textColor: "#92561D"
        },
        {
          icon: "icon-xitong1",
          text: "系统管理",
          bgcolor: "#FEF2F2",
          color: "#FF3D4F",
          textColor: "#DD6968"
        }
      ]
    };
  },
  created() {
    this.loadTime();
  },
  methods: {
    //登录
    loginIndex() {
      // this.$router.push("/loginText");
      this.dialogVisible = true;
    },
    loadTime() {
      var _this = this;
      setInterval(() => {
        _this.date += 1000;
      }, 1000);
    },
    // 转换时间戳
    formateTimeStamp(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var second =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
      return (
        '<span style="font-size: 66px; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
        hour +
        ":" +
        minute +
        ":" +
        second +
        "</span><br/>" +
        year +
        "年" +
        month +
        "月" +
        day +
        "日" +
        "&nbsp;&nbsp;&nbsp;星期" +
        week
      );
    },
    // 八个入口
    listClick(index) {
      this.osindex = index;
      if (index == 0) {
        //日常办公
        if (getToken()) {
          this.$router.push("/dbgz");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 1) {
        //综合执法
        if (getToken()) {
          this.$router.push("/bsWorkToDo");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 2) {
        //数据中心
        if (getToken()) {
          this.$router.push("/qyxx");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 3) {
        //智慧中心
        if (getToken()) {
          this.$router.push("/dbgz");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 4) {
        //企业帮扶
        if (getToken()) {
          this.$router.push("/dbgz");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 5) {
        //学法练兵
        if (getToken()) {
          this.$router.push("/jdal");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 6) {
        //统计分析
        if (getToken()) {
          this.$router.push("/dbgz");
        } else {
          this.dialogVisible = true;
        }
      } else if (index == 7) {
        //系统管理
        if (getToken()) {
          this.$router.push("/sysUser");
        } else {
          this.dialogVisible = true;
        }
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, {
              expires: 30
            });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
          api.user
            .login(this.loginForm)
            .then(res => {
              if (res.code) {
                this.$store.dispatch("user/login", res.token);
                this.getInfo();
              } else {
                ElMessage({
                  type: "error",
                  message: res.msg
                });
                this.$router.push("/login");
              }
            })
            .catch(err => {
              ElMessage({
                type: "error",
                message: err.msg
              });
              this.$router.push("/login");
              // if (this.captchaOnOff) {
              //   this.getCode();
              // }
            });
        }
      });
    },
    getInfo() {
      this.$store.dispatch("user/getInfo").then(() => {
        this.$router.push({
          path: "/index"
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.firstBox {
  position: absolute;
  width: 100%;
  min-width: 1200px;
  height: 73%;
  background: url("../../assets/images/bg.jpg") no-repeat center;
  background-size: 100% 100%;
}

.logoBox {
  padding: 39px 50px 15px;
  color: #fff;
}

.logo {
  display: flex;
  align-items: center;
}

.logoTitle {
  display: inline-block;
  width: 997px;
  height: 48px;
  margin-left: 15px;
  font-size: 46px;
  font-family: YouSheBiaoTiHei;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 4px 7px rgba(1, 60, 80, 0.45);
}

.margin-right-sm {
  margin-top: 10px;
}

.login {
  position: absolute;
  margin-right: 50px;
  right: 0;
  top: 70px;
  font-size: 22px;
  display: flex;
  align-items: center;
}

.login i {
  font-size: 32px;
  margin-right: 8px;
  vertical-align: middle;
}

.timeBox p {
  text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);
  color: #fff;
  padding: 70px;
}

.firstCon {
  z-index: 9;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 55px;
  text-align: center;
  color: #fff;
}

.firstCon .flex-sub {
  width: 160px;
  height: 140px;
  box-shadow: 0px 2px 7px 1px rgba(123, 123, 123, 0.27);
  border-left-width: 10px;
}

.firstCon .main {
  margin-top: 20px;
}

.firstCon .iconfont {
  font-size: 50px;
}

.firstCon .text-title {
  font-weight: bold;
  font-size: 20px;
  line-height: 2.5;
}

/deep/.el-overlay-dialog {
  top: 260px;
}

.login-form {
  margin: 0 auto;
  width: 440px;
  margin-top: -50px;
  /* padding: 25px 25px 21px 25px; */
  border-radius: 0 6px 6px 0;
  background: #ffffff;

  .title {
    text-align: center;
    font-size: 24px;
  }

  :deep(.el-input) {
    height: 45px;

    input {
      height: 45px;
      padding: 0 10px;
    }
  }

  .iconfont {
    color: #0469ff;
    font-size: 24px;
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

  :deep(.el-input__wrapper) {
    padding: 0 0px;
  }
}

.loginbtn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  font-size: 18px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(#0fb6ff, #066aff);
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }

  &:active {
    opacity: 1;
  }
}
</style>
